<template>
  <view v-if="props.bgImage" :style="{ background: `url(${props.bgImage})` }" style="width: 100%;height: 100vh;background-size: 100% auto;">
    <slot />
  </view>
  <view v-else>
    <view style="position: absolute;top: 0;width: 100%;opacity: 0.9;z-index: 99">
      <slot />
    </view>
    <view class="circle-background">
      <view
        v-for="(circle, index) in circles"
        :key="index"
        :class="`circle circle-${index}`"
        :style="{ left: `${circle.x}px`, top: `${circle.y}px`, fontSize: `${circle.size}px`, opacity: circle.isVisible ? 0.8 : 0 }"
      >
        {{ props.bgType === 1 ? '●' : props.bgType === 2 ? '★' : props.bgType === 3 ? '♥' : '♦' }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const props = defineProps({
  bgImage: {
    type: String,
    default: '',
  },
  bgType: {
    type: [String, Number],
    default: 1, // 1=圆点,2=五角星,3=爱心,4=菱形
  },
})

const windowWidth = ref(0)
const windowHeight = ref(0)
const circles = ref([])
const intervalIds = ref([]) // 用于存储每个圆圈的闪烁定时器ID
// 设置随机大小，范围在10到30之间，单位为像素，用于圆圈的大小，根据index的值，每个圆圈的大小都不同，写一个计算属性

function createCircles() {
  for (let i = 0; i < 50; i++) {
    const circle = {
      x: Math.random() * windowWidth.value,
      y: Math.random() * windowHeight.value,
      isVisible: Math.random() > 0.5,
      // 设置随机大小，范围在10到30之间，单位为像素
      size: Math.random() * 30 + 20,
    }
    // 为每个圆圈初始化闪烁逻辑
    circles.value.push(circle)
  }
  for (let i = 0; i < circles.value.length; i++) {
    initBlink(i)
  }
}

// 初始化单个圆圈的闪烁逻辑
function initBlink(i) {
  const blink = () => {
    circles.value[i].isVisible = !circles.value[i].isVisible
    // 随机设置下一次闪烁的时间间隔，例如在1到3秒之间
    const nextBlinkDelay = Math.random() * 2000 + 1000
    intervalIds.value.push(setTimeout(blink, nextBlinkDelay))
  }
  blink() // 立即开始第一次闪烁
}

onMounted(() => {
  if (!props.bgImage){
    uni.getSystemInfo({
      success: (res) => {
        windowWidth.value = res.windowWidth
        windowHeight.value = res.windowHeight
        createCircles()
      },
      fail(err) {
        console.error('获取屏幕尺寸失败', err)
      },
    })
  }
})

onUnmounted(() => {
  // 清理所有圆圈的闪烁定时器
  intervalIds.value.forEach(id => clearTimeout(id))
  intervalIds.value = [] // 重置数组
})
</script>

<style scoped>
.circle-background {
  position: relative;
  width: 100%;
  height: 100vh;
  display: block;
  overflow: hidden;
  background: linear-gradient(145deg, #A0EC53,#40BBFA, #CE6EAB);
}

.circle {
  position: absolute;
  border-radius: 50%;
  color: #f0ad4e;
  transition: all 0.3s ease-in-out; /* 动画效果 */
}
</style>
